<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/font-awesome.min.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/client_modules/angular/angular.js"></script>
    <script src="/client_modules/angular-route/angular-route.js"></script>
    <script src="/user/controllers/user.client.login.controller.js"></script>
    <title>Login&Register</title>
</head>
<body ng-app="clientLoginAndRegister">
<div class="login-bg">
    <div class="module form-module">
        <div class="toggle"><i style="margin-top: 9px;" class="fa fa-lg fa-times fa-pencil"></i></div>
        <div class="form" ng-controller="LoginController">
            <h2>Login to your account</h2>
            <input type="text" id="loginName" name="loginName" placeholder="Username..." ng-model="cu.cname"/>
            <input type="password" id="loginPwd" name="loginPwd" placeholder="Password..." ng-model="cu.cpassword"/>
            <div ng-show="loginErro" class="alert alert-danger" style="color: red" role="alert" id="loginErro" ng-bind="loginErro"></div>
            <button id="loginSubmit" ng-click="loginSubmit()">Login</button>
        </div>
        <div class="form" ng-controller="RegisterController">
            <h2>Create an account</h2>
            <input type="text" name="cname" id="cname" placeholder="Username" ng-model="cu.cname" ng-blur="checkCName()"/>
            <div ng-show="cnameError" class="alert alert-danger" style="color: red" role="alert" id="cnameError" ng-bind="cnameError"></div>
            <input type="number" name="ctel" id="ctel" placeholder="Phone Number" ng-model="cu.ctel" ng-blur="checkCTel()"/>
            <div ng-show="ctelError" class="alert alert-danger" style="color: red" role="alert" id="ctelError" ng-bind="ctelError"></div>
            <input type="text" name="caddress" id="caddress" placeholder="Address" ng-model="cu.address" ng-blur="checkAddress()"/>
            <div ng-show="caddressError" class="alert alert-danger" style="color: red" role="alert" id="caddressError" ng-bind="caddressError"></div>
            <input type="password" name="cpassword" id="cpassword" placeholder="Password" ng-model="cu.password" ng-blur="checkCPassword()"/>
            <div ng-show="passwordError" class="alert alert-danger" style="color: red" role="alert" id="passwordError" ng-bind="passwordError"></div>
            <input type="password" name="cpasswordpwd" id="cpasswordpwd" placeholder="Password Confirm" ng-model="cu.password1" ng-blur="checkCPasswordpwd()"/>
            <div ng-show="cpasswordpwdError" class="alert alert-danger" style="color: red" role="alert" id="cpasswordpwdError" ng-bind="cpasswordpwdError"></div>
            <button type="button" id="registerSubmit" ng-click="registerSubmit()">Register</button>
        </div>
        <div style="display:none" class="cta"><a href="javascript:void(0)">Forgot your password?</a></div>
    </div>
</div>
</body>
<script>

    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null)
            return unescape(r[2]);
        return null;
    }

    if(getQueryString('register')){
        $('.form').animate({
            height : "toggle",
            'padding-top' : 'toggle',
            'padding-bottom' : 'toggle',
            opacity : "toggle"
        }, "slow");
    }

    $('.toggle').click(function() {
        $(this).children('i').toggleClass('fa-pencil');
        $('.form').animate({
            height : "toggle",
            'padding-top' : 'toggle',
            'padding-bottom' : 'toggle',
            opacity : "toggle"
        }, "slow");
    });

</script>
</html>